<template>
  <el-dialog
    :before-close="handleClose"
    :title="title"
    :visible.sync="centerDialogdisable"
    center
    width="30%"
  >
    <el-form :model="modifyForm" :rules="rulesForm" ref="modifyForm">
      <el-row>
        <el-col :span="24">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="modifyForm.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="newPassword">
            <el-input v-model="modifyForm.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="modifyForm.password2"></el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button @click="handleClose">取消</el-button>
            <el-button @click="handleModify('modifyForm')" type="primary"
              >修改</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { ModifyForm } from "@/interface/interface";
import { modify } from "@/api/api";
import { Message } from "element-ui";

const validatePassword = (
  rule: any,
  value: string,
  callback: { (arg0: Error): void; (): void }
) => {
  value === "" ? callback(new Error("输入密码不能为空")) : callback();
};
const validatePassword2 = (
  rule: any,
  value: string,
  callback: any,
  confirmThis: any
) => {
  console.log(confirmThis);
  value === ""
    ? callback(new Error("输入密码不能为空"))
    : value != confirmThis.password2
    ? callback(new Error("密码不一致"))
    : callback();
};
@Component({})
export default class commDialog extends Vue {
  @Prop(Boolean)
  protected diglog!: boolean;

  get centerDialogdisable() {
    return this.diglog;
  }

  protected name!: "commDialog";

  protected modifyForm: ModifyForm = {
    oldPassword: "",
    newPassword: "",
    password2: ""
  };
  protected title: string = "修改密码";
  protected rulesForm = {
    oldPassword: [
      {
        required: true,
        message: "原密码不能为空",
        trigger: "blur"
      },
      {
        validator: validatePassword.bind(this),
        trigger: "blur"
      }
    ],
    newPassword: [
      {
        required: true,
        message: "密码不能为空",
        trigger: "blur"
      },
      {
        validator: validatePassword.bind(this),
        trigger: "blur"
      }
    ],
    password2: [
      {
        required: true,
        message: "确认密码不能为空",
        trigger: "blur"
      },
      {
        validator: validatePassword2.bind(this),
        trigger: "blur"
      }
    ]
  };

  @Emit("bindSend")
  protected handleClose() {
    return !this.centerDialogdisable;
  }
  @Emit("bindSend")
  protected dialogtoggle() {
    return false;
  }

  protected handleModify(name: any) {
    (this.$refs[name] as any).validate(async (volid: any) => {
      if (volid) {
        const { oldPassword, newPassword } = this.modifyForm as any;
        const res = await modify({ oldPassword, newPassword });
        if (res) {
          const { success, message, object } = res;
          if (success) {
            this.$message({
              message: "密码修改成功，请牢记密码！",
              type: "success"
            });
            setTimeout(() => {
              this.dialogtoggle();
            }, 1000);
            this.$router.push({ name: "Home" });
          } else {
            this.$message({
              message: message,
              type: "error"
            });
            this.modifyForm = {
              oldPassword: "",
              newPassword: "",
              password2: ""
            };
            this.$router.push({ name: "Home" });
            setTimeout(() => {
              this.dialogtoggle();
            }, 1000);
          }
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped></style>
